var MaterialColorSetting = function () {
  var template = /* html */ `
    <div class="material-color-setting">
      <div class="material-color-setting-btns" v-if="!isPrint">
        <el-button size="mini" type="primary" @click="toSettingConfig">配置</el-button>
        <el-button v-if="mode==='test'" size="mini" type="primary" @click="addTestData">添加数据</el-button>
      </div>
      <div class="material-color-setting-line" v-if="isLine"></div>
      <div class="material-color-setting-content" :key="tableId">
        <el-table fit border ref="materialColorTable" :data="materialColorDataList" :style="{'min-height':materialColor.minHeight+'px'}"
          :cell-class-name="setCellClassName" @header-dragend="headerDragend">
          <template v-for="tableHeader in tableHeaderList">
            <template v-if="tableHeader.id==='material'">
            <el-table-column :resizable="false" :label="tableHeader.materialType" :column-key="tableHeader.key" :key="tableHeader.key" header-align="center">
              <template v-for="column in tableHeader.columns">
              <el-table-column :resizable="!isPrint" :label="column.label" :key="column.key" :column-key="column.key" :min-width="column.width" header-align="center"
                :align="column.align">
                <template slot-scope="scope">
                  <template v-if="mode!=='test'">
                    <span v-if="column.id!=='remark'">
                      {{getMaterialColorData(scope.row,tableHeader,column)}}
                    </span>
                    <template v-else-if="scope.row.materialDataObj[tableHeader.materialType]!==undefined">
                    <show-textarea autosize v-model="scope.row.materialDataObj[tableHeader.materialType].remark" :readonly="isPrint"></show-textarea>
                    </template>
                  </template>
                </template>
              </el-table-column>
              </template>
            </el-table-column>
            </template>

            <template v-else-if="tableHeader.id==='glasses'">
              <template v-for="column in tableHeader.columns">
              <el-table-column :resizable="!isPrint" :label="column.materialType" :key="column.key" :column-key="column.key" :min-width="column.width" align="center">
                <template slot-scope="scope">
                  <span v-if="mode!=='test'">{{getGlassesOrderTotal(scope.row,column)}}</span>
                </template>
              </el-table-column>
              </template>
            </template>

            <template v-else-if="tableHeader.id==='deliveryDate'">
            <el-table-column :resizable="false" :label="tableHeader.label" :column-key="tableHeader.key" :key="tableHeader.key" header-align="center">
              <template v-for="column in tableHeader.columns">
              <el-table-column :resizable="!isPrint" :label="column.label" :key="column.key" :column-key="column.key" :min-width="column.width" align="center">
                <template slot-scope="scope">
                  <span v-if="mode!=='test'">{{getDeliveryDateData(scope.row,column)}}</span>
                </template>
              </el-table-column>
              </template>
            </el-table-column>
            </template>

            <template v-else>
            <el-table-column :resizable="!isPrint" :label="tableHeader.label" :prop="tableHeader.id" :key="tableHeader.id" :min-width="tableHeader.width" header-align="center"
              :align="textAlignCenter.indexOf(tableHeader.id)!==-1?'center':'left'">
              <template slot-scope="scope">
                <show-textarea v-if="tableHeader.id==='remark'" autosize v-model="scope.row.remark" :readonly="isPrint"></show-textarea>
                <span v-else-if="tableHeader.id==='lineNo'">
                  {{mode==='test'?scope.$index+1:scope.row.lineNo}}
                </span>
                <span v-else>{{scope.row[tableHeader.id]}}</span>
              </template>
            </el-table-column>
            </template>
          </template>
          
          <template slot="append" v-if="mode!=='test'&&data.orderRemark!==''">
            <div class="material-color-setting-remark clearfix">
              <div style="border-right:1px solid #000000;font-size:14px">客户要求</div>
              <div style="width:calc(100% - 81px)">
                <rich-editor disabled v-model="data.orderRemark"></rich-editor>
              </div>
            </div>
          </template>
        </el-table>
      </div>
    </div>
  `;

  return {
    props: {
      config: {
        type: Object,
        required: true
      },
      data: Object
    },

    inject: {
      templProp: {
        default: function () {
          return {};
        }
      }
    },

    computed: {
      materialColor: function () {
        return this.config.materialColor;
      },
      mode: function () {
        return this.data.mode;
      },
      tableHeaderList: function () {
        var materialColor = this.materialColor;
        return this.data.getTableHeaderList(materialColor);
      },
      materialColorDataList: function () {
        return this.data.materialColorDataList;
      },
      isPrint: function () {
        return this.templProp.isPrint;
      },
      isLine: function () {
        return this.templProp.isLine;
      },
      isEmphasize: function () {
        return this.templProp.isEmphasize;
      }
    },

    watch: {
      isPrint: function () {
        this.tableId = SysUtil.getId();
      }
    },

    data: function () {
      return {
        textAlignCenter: MaterialColorConfigModel.textAlignCenter,
        tableId: SysUtil.getId()
      };
    },

    methods: {
      headerDragend: function (newWidth, oldWidth, column) {
        var columnKey = column.columnKey;
        this.config.materialColor.resetWidth(columnKey, newWidth, oldWidth);
      },

      toSettingConfig: function () {
        this.$emit('setting-config', {
          dialogTitle: '物料颜色设置',
          dialogType: 'materialColor'
        });
      },

      addTestData: function () {
        this.data.addMaterialColorTestData();
      },

      getMaterialColorData: function (materialColorData, tableHeader, column) {
        var value = materialColorData.getTableData(tableHeader.materialType, column.id);
        return value;
      },

      getGlassesOrderTotal: function (materialColorData, column) {
        var value = materialColorData.getGlassesOrderTotal(column.materialType);
        return value;
      },

      getDeliveryDateData: function (materialColorData, column) {
        var value = materialColorData.getDeliveryDateData(column.key);
        return value;
      },

      checkValid: function () {
        if (this.mode === 'test') {
          return true;
        }

        var totalWidth = $(this.$el).width();
        var materialColorTable = this.$refs['materialColorTable'];
        var tableWidth = $(materialColorTable.$el).find('.el-table__header-wrapper table').width() + 1;
        if (tableWidth > totalWidth) {
          this.$alert('物料颜色设置中，表格有横向滚动条');
          return false;
        }
        return true;
      },

      setCellClassName: function (option) {
        if (!this.isEmphasize) {
          return;
        }

        var materialColorData = option.row;
        var column = option.column;
        var columnKey = column.columnKey;
        if (materialColorData.checkUpdate(columnKey)) {
          return 'has-update';
        }
        return;
      }
    },

    components: {
      ShowTextarea: ShowTextarea,
      RichEditor: RichEditor
    },

    template: template
  };
}();
